<div class="pb-3 border-[0.5px] border-gray-200 bg-white rounded-xl shadow-sm">
  <div class="mt-3 px-4 bg-white">
    <div class="mb-2">
      <div class="flex items-center space-x-1 cursor-pointer select-none"
        (click)="toggleParams()">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
          class="w-4 h-4"
          [ngClass]="{'rotate-180': paramsExpanded()}"
          >
          <path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path>
        </svg>
        <div class="text-sm font-medium uppercase">{{ 'PAC.Xpert.InputParameters' | translate: {Default: 'Input parameters'} }}</div>
      </div>
    </div>

    @if (paramsExpanded()) {
      <xpert-parameters-form class="w-full" [readonly]="readonly()" [parameters]="parameters()" [(ngModel)]="value" />
    }
  </div>
</div>